<template>
  <!-- 
    一个带有左侧边框和图标的典型信息提示框样式。
    使用了 Tailwind CSS 来快速构建 UI。
  -->
  <div class="flex items-start px-4 py-2 bg-white dark:bg-black  rounded-2xl shadow-lg max-w-sm border-l-4 border-blue-500 ">
    
    <!-- 信息图标 (SVG) -->
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>

    <!-- 消息文本 -->
    <div class="ml-3 w-full flex-1">
      <p class="text-sm text-gray-900 font-semibold  dark:text-gray-100">
        {{ props.message }}
      </p>
    </div>

    <!-- 关闭按钮 -->
    <div v-if="props.showClose" class="ml-4 flex-shrink-0 flex">
      <button @click="handleClose" class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

  </div>
</template>

<script setup lang="ts">


// 定义组件接收的 props
const props = withDefaults(
  defineProps<{
    message: string;
    showClose?:boolean
  }>(),
  {
    message:"提示内容",
    showClose:false
  }
)

// 定义组件可以发出的事件
const emit = defineEmits(['close']);

// 处理关闭按钮的点击事件
const handleClose = () => {
  // 发出 'close' 事件，通知父组件（ModalProvider）关闭这个弹框
  emit('close');
};
</script>
